<template>
  <draggable
    v-model="list"
    :group="itxst"
    :animation="500"
    ghostClass="ghost"
    chosenClass="chosen"
    selector="selector"
    :sort="true"
    item-key="id"
    :class="[isChild ? 'drag-child' : 'drag-area']"
  >
    <template #item="{ element }">
      <div>
        <schema-content-shape :data="element">
          <component
            :is="element.component"
            :component-key="element.id"
            :edit="true"
            v-bind="element"
            :class="[['object', 'array'].includes(element.type) ? '' : 'event-none']"
          ></component>
        </schema-content-shape>
      </div>
    </template>
  </draggable>
</template>

<script lang="ts">
import { defineComponent, watch, ref } from "vue";
import SchemaContentShape from "./SchemaContentShape.vue";
export default defineComponent({
  components: {
    SchemaContentShape,
  },
  props: ["componentList", "isChild"],
  setup(props, context) {
    let list = ref([]);

    watch(
      () => props.componentList,
      (val) => {
        list.value = val;
      },
      { deep: true, immediate: true }
    );

    watch(
      () => list,
      (val) => {
        context.emit("getItemData", val);
      },
      { deep: true, immediate: true }
    );

    return {
      itxst: { name: "itxst", pull: true, put: true },
      list,
    };
  },
});
</script>

<style lang="scss" scoped>
.drag-area {
  width: 100%;
  min-height: 600px;
  display: inline-block;
}
.drag-child {
  min-height: 50px;
  //   padding: 10px;
  background: #f5f5f5;
}
</style>
